<template>
    <div class="ProjectSearch row">
        <div class="col-11 offset-1">
            <el-card class="card" shadow="always" :body-style="{ padding: '10px' }" v-for="item in projectData" :key="item.project_id">
                <el-row>
                    <!-- 图片区域 -->
                    <el-col :span="9"><img class="cardImg" :src="$Global.url.baseUrl + item.icon" /></el-col>
                    <!-- 文本区域 -->
                    <el-col :span="14" style="margin-left: 10px;">
                        <el-container>

                            <!-- 方案标题 -->
                            <el-header style="padding: 0px;height: 70px;">
                                <router-link :to="{ name:'projectdetail',params: {project_id: item.project_id}}" style="text-decoration:none;">
                                    <!-- <h3 style="width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block;">{{item.titleName}}</h3> -->
                                    <h4 class="title">{{item.titleName}}</h4>
                                </router-link>
                            </el-header>

                            <!-- 方案简介 -->
                            <el-main style="padding: 0px;">
                                <p class="intro">{{item.intro}}</p>
                            </el-main>

                            <!-- 用户操作区 -->
                            <el-footer style="padding: 0px;">

                                <div id="UserAction" class="clearfix">
                                    <!-- 方案 ID -->
                                    <p class="projectId">ID：{{item.project_id}}</p><br>

                                    <!-- 推荐评分 -->
                                    <el-rate v-model="item.recommend" disabled show-score text-color="#ff9900"
                                        score-template="{value}" style="display: inline;margin-right: 20px;"></el-rate>

                                    <!-- 点赞按钮 -->
                                    <el-button type="text" class="actionButton" @click="btnOperation(item._id, 'like', $event, index)">
                                        <i :class="$store.state.like.indexOf(item._id) != -1 ?'iconfont el-icon-aixin_shixin':'iconfont el-icon-aixin'"></i><span>{{item.like}}</span>
                                    </el-button>

                                    <!-- 收藏按钮 -->
                                    <el-button type="text" class="actionButton" @click="btnOperation(item._id, 'collection', $event, index)">
                                        <i :class="$store.state.collection.indexOf(item._id) != -1 ?'iconfont el-icon-shoucang_shixin':'iconfont el-icon-shoucang'"></i><span>{{item.collect}}</span>
                                    </el-button>
                                </div>
                            </el-footer>
                        </el-container>
                    </el-col>
                </el-row>
            </el-card>
            <!-- 方案分页按钮 -->
            <el-pagination background @current-change="handleCurrentChange" :current-page="this.params.page" :page-size="this.params.limit"
                layout="prev, pager, next, jumper" :total="this.total"></el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                likeFlag: true, //点赞图标的切换
                collectionFlag: true, // 收藏图标的切换
                params: { //请求搜索结果参数
                    limit: 10,
                    page: 1,
                    keyword: ''
                },
                pages: 0, //总页数
                total: 0, //总数目
                projectData: [], //搜索数据
                url: {
                    findProject: this.$Global.url.findProject,
                    collectionApi: this.$Global.url.collection,
                    likeApi: this.$Global.url.like
                }
            };
        },
        created() {
            // if (process.env.NODE_ENV === "development") {
            this.url.findProject = this.$Global.url.baseUrl + this.$Global.url.findProject;
            this.url.collectionApi = this.$Global.url.baseUrl + this.$Global.url.collection;
            this.url.likeApi = this.$Global.url.baseUrl + this.$Global.url.like;
            // }
            // 组件创建完获取路由传送的数据
            this.getRouterData();
            this.getSearchData();

        },
        watch: {
            // 如果路由有变化，再次获取路由传送参数，并请求下载方案数据
            "$route"() {
                this.getRouterData();
                this.getSearchData();
            }
        },
        methods: {
            /**
             * 获取路由传送的参数
             */
            getRouterData() {
                this.params.keyword = this.$route.params.keyword;
                this.params.page = this.$route.params.page;
            },
            /**
             * 下载搜索结果的方案数据
             */
            getSearchData() {
                this.$http.get(this.url.findProject, {
                        params: this.params
                    })
                    .then(response => {
                        if (response.status == 200) {
                            this.projectData = response.data.docs;
                            this.pages = response.data.pages;
                            this.total = response.data.total;
                            window.scrollTo({
                                top: 0,
                                behavior: "smooth"
                            });
                            // console.log(response.data.docs)
                            // console.log(this.params.keyword)
                        } else {
                            console.log('请求数据异常')
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.getSearchData();
                // console.log(`当前页: ${val}`);
            },
            /**
             * 收藏 & 点赞
             */
            btnOperation(id, operation, event, index) {
                var data = {
                    _id: id
                };
                var url;
                if (operation === 'like') {
                    url = this.url.likeApi;
                } else if (operation === 'collection') {
                    url = this.url.collectionApi;
                }
                this.$http.post(url, data).then(response => {
                        if (response.status == 200) {
                            if (response.data.success) {
                                this.$message(response.data.message);
                                if (operation === 'like') {
                                    this.$store.commit('changeLike', id);
                                } else if (operation === 'collection') {
                                    this.$store.commit('changeCollection', id);
                                }

                                switch (response.data.message) {
                                    case '删除点赞成功':
                                        this.projectClassData[index].like--;
                                        break;
                                    case '添加点赞成功':
                                        this.projectClassData[index].like++;
                                        break;
                                    case '删除收藏成功':
                                        this.projectClassData[index].collect--;
                                        break;
                                    case '添加收藏成功':
                                        this.projectClassData[index].collect++;
                                        break;
                                }
                            } else {
                                this.$message('操作失败');
                            }
                        } else {
                            this.$message('请求失败');
                        }
                    })
                    .catch(error => {
                        // console.log(error);
                        if (error.status == 401) {
                            this.$message({
                                type: 'warning',
                                message: '请登录后尝试！'
                            })
                        }
                    });
            }
        }
    };
</script>

<style scoped>
    /* 卡片方案展示样式 */

    #ProjectScroll.botton {
        padding: 0px;
    }

    #UserAction {
        position: absolute;
        bottom: 0px;
    }

    #ProjectScroll.image {
        width: auto;
        height: 100%;
        display: block;
    }

    .card {
        margin: 10px;
        min-width: 400px;
    }

    .cardImg {
        width: 100%;
        height: 200px;
        overflow: hidden;
    }

    .title {
        /* 文本省略处理 */
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: black;
    }

    .intro {
        margin: 0px;
        width: 100%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .projectId {
        line-height: 14px;
        margin-bottom: 0px;
        display: inline-block;
        position: relative;
        left: 0px;
    }

    .clearfix {
        margin-top: 13px;
        line-height: 12px;
    }

    .actionButton {
        outline: none;
    }
</style>